<script setup lang="ts">
import { h, onMounted, onUnmounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import { UpdInfo } from './types/github/ghUpdInfo'
import { dialogComponent } from './types/dialog/dialog'
import { useDialog } from './utils/template-dialog'
import UpdateDialogContent from './components/UpdateDialogContent.vue'
import { translate } from './i18n'

import TopHeader from './components/TopHeader.vue'
import { useStore } from './store'

const store = useStore()

let appVer = ''
const updCheck = ref(false)
const updInfo = ref<UpdInfo>({
  assets: [],
  assets_url: '',
  author: undefined,
  body: '',
  created_at: '',
  discussion_url: '',
  draft: false,
  html_url: '',
  id: 0,
  name: '',
  node_id: '',
  prerelease: false,
  published_at: '',
  tag_name: '',
  tarball_url: '',
  target_commitish: '',
  upload_url: '',
  url: '',
  zipball_url: '',
})
const rAF = window.requestAnimationFrame
// const rAFStop = window.cancelAnimationFrame
const gpType = ref('Xbox')
provide('gpType', gpType)

const hScale = ref(window.innerWidth / 1200)
const vScale = ref(window.innerHeight / 700)
const cardResizeCb = () => {
  hScale.value = window.innerWidth / 1200
  vScale.value = window.innerHeight / 700
}

provide('hScale', hScale)
provide('vScale', vScale)

const skipCurrent = ref(false)
const gamepad = ref(false)
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)')
const router = useRouter()








onMounted(async () => {
  if (
    store.settings.appearance.colorTheme == 3 ||
    (store.settings.appearance.colorTheme == 2 && darkModePreference.matches)
  ) {
    document.body.classList.add('dark')
  } else {
    document.body.classList.remove('dark')
  }

  if (store.settings.appearance.colorTheme == 2) {
    darkModePreference.addEventListener('change', e => {
      if (e.matches) {
        document.body.classList.add('dark')
      } else {
        document.body.classList.remove('dark')
      }
    })
  }


  fetch('../package.json')
    .then(response => response.json())
    .then(resp => {
      appVer = resp.version
    })

  window.visualViewport?.addEventListener('resize', cardResizeCb)

})

onUnmounted(() => {
  window.visualViewport?.removeEventListener('resize', cardResizeCb)
})

const verCompare = (a: string, b: string) => {
  const arr1 = a.split('.')
  const arr2 = b.split('.')

  if (arr1.length != arr2.length) {
    return 114
  }

  for (let i = 0; i < arr1.length; i++) {
    if (parseInt(arr1[i]) > parseInt(arr2[i])) {
      return 1
    } else if (parseInt(arr1[i]) < parseInt(arr2[i])) {
      return -1
    }
  }
  return 0
}

</script>

<template id="app">
  <Transition name="swipe-top">
    <TopHeader v-if="!gamepad" />
  </Transition>
  <router-view></router-view>

</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;

.swipe-top-enter-from,
.swipe-top-leave-to {
  transform: translateY(-100%);
}

.swipe-top-enter-active {
  transition: transform 0.3s;
}
</style>
